<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <style>
        #dplayer{
            max-height: 800px;
            max-width: 800px;
            margin-left: 2.5cm;

        }
    </style>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <title>LangV</title>

    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script th:src="@{/js/html5shiv.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <style>
        /*v-clock 解决闪烁{{后端参数}}的问题，在id=app的div内声明v-clock即可*/
        [v-clock]{
            display: none;
        }
    </style>
</head>

<body class="mybody">

<!-- left side start-->
<!-- left side end-->

<!-- main content start-->

<!-- header section start-->
<div th:replace="common/header::top"></div>
<!-- header section end-->

<!-- page heading start-->
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper" >
    <div class="row">
        <input hidden="hidden" type="text" id="content" th:value="${videoId}">

        <div class="col-md-8">
            <section class="panel">
                <div class="panel-body">
                    <div class="row">

                        <br>
                        <div id="dplayer" ></div>
                        <br>
                     <div id="app" v-clock class="video-info"   >
                        <div class="mytitle" >
                            {{video.title}}
                        </div>
                        <br>
                        <div class="myjudge">
                            <span class="video-view">21,321,321次观看</span>&nbsp&nbsp
                            <span class="video-view">{{video.postTime}}</span>
                            <span   class="video-judge">
                            <a  href="javascript:void(0);" class="fa fa-thumbs-up" >12.3万</a>
                            <a  href="javascript:void(0);" class="fa fa-thumbs-down" >2122</a>
                            <a  href="javascript:void(0);" class="fa fa-star" >1.1万</a>
                            <a  href="javascript:void(0);" class="fa fa-share" >123</a>

                            </span>

                        </div>
                        <hr>
                        <div class="video-usr">
                            <a :href="'/user/toHome/'+(video.username)" class="" >
                                <img  th:src="@{/images/photos/user.png}" alt="" />
                                <!--获取当前用户名-->
                                <span class="usrname" >{{video.username}}</span>
                            </a>
                            <a @click="subscribe"    class="btn btn-danger subscribe_btn"  >订阅2.5万</a>
                            <a @click="un_subscribe" class="btn btn-danger subscribe_unbtn" style="display: none">已订阅 2.5万</a>
                        </div>
                        <div class="row">
                            <div >
                                <!--collapse start-->
                                <div class="panel-group ">
                                    <div >
                                        <div  class="panel-collapse collapse in">
                                            <div class="panel-body">
                                               {{video.introduction}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--collapse end-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="panel-body mycomment">
                            <span class="c_title">评论 {{totalRecords}}</span>
                            <form class="form-horizontal leave-cmnt">
                                  <div class="form-group">
                                     <textarea v-model="comment_information" class="form-control mytextarea" rows="8" placeholder="Message"></textarea>
                                  </div>
                              </form>
                              <p>
                                  <a class="btn btn-post-cmnt pull-right popup" @click="post_comment" >发表评论
                                      <span class="popuptext" id="myPopup">不能发布空评论!</span>
                                      <span class="popuptext" id="myPopup2">发布成功!</span>
                                      <span class="popuptext" id="myPopup3">发布太频繁了!</span>
                                  </a>
                              </p>
                              <div id="noComment" style="text-align: center"></div>
                              <ul v-for="(comment,index) in commentList" class="activity-list">


                                  <li >
                                      <div class="avatar">
                                          <a :href="'/user/toHome/'+(comment.commentator)"><img th:src="@{/images/photos/user3.png}" alt=""/></a>
                                      </div>
                                      <div class="activity-desk">

                                          <h5><a :href="'/user/toHome/'+(comment.commentator)">{{comment.commentator}}</a> <span>发表了评论</span></h5>
                                          <p class="text-muted" v-text="commentTimeDif[index]"> </p>
                                          <div class="location-map">
                                              <div class="map-canvas">
                                                  {{comment.commentInfo}}
                                              </div>
                                          </div>
                                      </div>
                                  </li>
                              </ul>
                              <div id="pagination" style="display: none;">
                                  <ul style="float: right" class="pagination">
                                      <li><a @click="prePage" >«</a></li>
                                      <li><a @click="firstPage" >1</a></li>
                                      <li ><a >···</a></li>
                                      <li class="active"><a >{{currentPage}}</a></li>
                                      <li ><a >···</a></li>
                                      <li><a @click="lastPage" >{{totalPages}}</a></li>
                                      <li><a @click="nextPage" >»</a></li>

<!--                                      <li>-->
<!--                                         跳至<input type="text"  class="form-control myblog-search">-->

<!--                                      </li>-->
                                  </ul>

                              </div>

                          </div>

                        </div>

                        <a v-bind:title="returnTopInfo" @click="returnTop"  class="btn btn-default returnTop " data-toggle="button">
                                 <i style="color: #797979" class="fa fa-arrow-up"></i>
                             </a>

                     </div>

                    </div>
                </div>
            </section>
        </div>

        <div id="app2" v-clock class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <div class="panel-body ">
                            <div class="rightTitle">
                                最新推荐
                            </div>

                        <div v-for="(video,index) in videos" class="rightZoom">
                            <div  class="images item " >
                                <!--注意此处Vue传入参数的方式-->
                                <a :href="'/video/toVideo/'+(video.id)" data-toggle="modal" >
                                    <img class="vimg" :src="'/video/getImg/'+(video.id)" alt="" />
                                    <p> &nbsp;{{video.time}}</p>
                                </a>
                                <div class="p1">
                                    <a :href="'/video/toVideo/'+(video.id)" v-bind:title="video.title" class="aitem">{{video.title}}</a>
                                </div>
                                <div >
                                    <p3>
                                    <img  height="15px" width="15px" th:src="@{/images/icon_up.png}" alt="" />
                                    <a  :href="'/user/toHome/'+(video.username)"> {{video.username}}&nbsp </a>
                                    <i style="font-size: 15px;color: #86b828" class="fa fa-check-circle-o"></i>
                                    </p3>
                                </div>
                                <div class="p2">
                                    <i style="font-size: 16px" class="fa fa-youtube-play"></i>&nbsp22万次 &nbsp&nbsp&nbsp&nbsp
                                    <i style="font-size: 16px" class="fa fa-clock-o"></i>&nbsp {{video.postTime}}
                                </div>
                            </div>
                        </div>
                        </div>
                    </section>

                </div>
            </div>
        </div>

    </div>
</div>
<!--body wrapper end-->

<!--footer section start-->
<!--footer section end-->
<div th:replace="common/header::footer"></div>


<!-- m  ain content end-->

<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<!--右边滑条样式-->
<!--<script th:src="@{/js/jquery.nicescroll.js}"></script>-->

<script th:src="@{/js/jquery.isotope.js}"></script>

<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>

<script th:src="@{/js/DPlayer.hls.js}"></script>
<script th:src="@{/js/DPlayer.min.js}"></script>

<script>
    var videoId = document.getElementById("content").value;
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: false,
        theme: 'red',
        loop: false,
        lang: 'zh-cn',
        screenshot: false,
        hotkey: true,
        preload: 'auto',
        logo: '',
        volume: 0.1,
        mutex: true, //阻止多个播放器同时播放
        video: {
            url: 'http://localhost:8080/video/getVideo/'+videoId,
            pic: '',
            thumbnails: '',
            type: 'customDash',
            customType: {
                customHls: function (video, player) {
                    const hls = new Hls();
                    hls.loadSource(video1.src);
                    hls.attachMedia(video1);
                },
            },
        },
        subtitle: {
            url: '',
            type: 'webvtt',
            fontSize: '25px',
            bottom: '10%',
            color: '#b7daff',
        },
        danmaku: {
            id: '9E2E3368B56CDBB4',
            api: '',
            token: 'tokendemo',
            maximum: 1000,
            addition: [''],
            user: 'DIYgod',
            bottom: '15%',
            unlimited: true,
        },
        contextmenu: [
            {
                text: 'custom1',
                link: 'https://github.com/DIYgod/DPlayer',
            },
            {
                text: 'custom2',
                click: (player) => {
                    console.log(player);
                },
            },
        ],
        highlight: [
            {
                time: 20,
                text: '20s',
            },
            {
                time: 120,
                text: '2m',
            },
        ],
    });
</script>
<script >
    new Vue({
        el: '#app',
        data: {
            videos: [],
            video: '',
            comment_information: '',
            currentPage: 1,
            video_username: "",
            totalPages :"",
            upLoading: true,
            commentList: [],
            returnTopInfo: '返回顶部',
            commentTimeDif: [],
            totalRecords : '',
            /*想完成定时任务先创建一个计算器timer*/
            timer: 0,
            timer2:0,
            timer3:0,
            timer4:0,
            timer5:0,
            //发布次数
            time: 0,
        },
        created(){
            moment.locale('zh-cn')
            window.addEventListener('scroll', this.handleScroll,true);  // 监听（绑定）滚轮滚动事件
            window.add
            axios.get('/video/getVideoInfo/'+videoId).then(res=>{
                this.video=res.data;
                this.video_username=res.data.username
                const _this=this;
             axios.get('/subscription/status/'+_this.video_username+"/"+currentUsername).then(res=> {
                 if (currentUsername===''){
                     //未订阅
                     $('.subscribe_unbtn').attr('style', 'display: none;') ;
                 }else
                 {
                  var original_status=res.data
                 if(original_status>0){
                      //未订阅
                      $('.subscribe_unbtn').attr('style', 'display: none;') ;
                      $('.subscribe_btn').attr('style', 'display: inline;') ;
                 }else {
                      //已订阅
                      $('.subscribe_btn').attr('style', 'display: none;') ;
                      $('.subscribe_unbtn').attr('style', 'display: inline;') ;
                 }
                 }
             })
            });
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll);   //  离开页面清除（移除）滚轮滚动事件
        },
        methods:{
            subscribe() {
                if (currentUsername!==""){
                $('.subscribe_btn').css('display', 'none');
                $('.subscribe_unbtn').css('display', 'inline');
                /*两个定时方法的解释(该方法在这不能延时太长时间，因为如果还到执行内部代码的时间就切换页面那么就不会执行了)
                   1、 clearTimeout(this.timer)：当上面事件下来时，把唯一的timer清除，即置零
                   2、 this.timer = setTimeout(() =>{···},10000):
                       此时timer开始计时，计到4s时就开始执行大括号里面的函数;
                       如多次点击，那么就会不断触发上面的clearTimeout函数，
                       又会把timer给置零了,又重新计时。所以只有最后一次点击有效
                 */
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    axios.get('/subscription/subscribe/' + this.video.username).then(res => {
                        console.log("订阅成功");
                    })
                },1000)
                }else {
                    alert("请先登录");
                }
            },
            un_subscribe(){
                $('.subscribe_unbtn').css('display', 'none');
                $('.subscribe_btn').css('display', 'inline');
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    axios.get('/subscription/undo_subscribe/' + this.video.username).then(res => {
                        console.log("取消订阅成功");
                    })
                }, 1000)


                },
            post_comment(){
                //防止发送空信息
                if (currentUsername!==''){
                if (this.comment_information==""){
                    var popup = document.getElementById("myPopup");
                    popup.classList.toggle("show")
                    clearTimeout(this.timer2)
                    this.timer2 = setTimeout(() => {
                        popup.classList.remove("show")
                    },3000)
                }else {
                    //防止频繁发布,time为0 允许发布，每发布一次time置1，经过15s后置0
                if (this.time==0){
                axios.post('/comment/postComment',{
                    id: '',
                    video_id: videoId,
                    video_username: this.video_username,
                    commentator: currentUsername,
                    commentTime: new Date(),
                    commentInfo: this.comment_information
                })
                 this.time=1;
                this.comment_information='';
                    var popup2 = document.getElementById("myPopup2");
                    popup2.classList.toggle("show")
                    clearTimeout(this.timer3)
                    this.timer3 = setTimeout(() => {
                        popup2.classList.remove("show")
                        this.loadMore(true)
                    },2000)
                    clearTimeout(this.timer4)
                    this.timer4=setTimeout(()=>{
                        this.time=0;
                    },15000)
                }else {
                    var popup3 = document.getElementById("myPopup3");
                    popup3.classList.toggle("show")
                    clearTimeout(this.timer5)
                    this.timer5 = setTimeout(() => {
                        popup3.classList.remove("show")
                    },2000)
                }
                }
                }else {
                    alert("请先登录")
                }
            },
            loadMore(event) {
                if(this.upLoading||event) {
                    axios('/comment/getComment/'+this.currentPage+"/"+videoId).then(res=>{
                             this.commentList=res.data.records;
                        if (this.commentList.length>0){
                             this.totalPages=res.data.pages;
                             this.totalRecords=res.data.total;
                            for (let i = 0; i <this.commentList.length ; i++) {
                                let comment_time=this.commentList[i].commentTime
                                let timeDif=moment(comment_time).startOf('minute').fromNow()
                                if (timeDif.indexOf("天")!==-1||timeDif.indexOf("月")!==-1||timeDif.indexOf("年")!==-1){
                                    this.commentTimeDif.push(moment(comment_time).format("YYYY-MM-DD"))
                                }else {
                                    this.commentTimeDif.push(timeDif)
                                }
                             }
                            $('#pagination').css("display", "inline")
                            $('#noComment').text("")
                        }else {
                            $('#noComment').text("暂无评论，快来占楼吧！")
                        }
                    })
                    this.upLoading = false;


                }
            },
            handleScroll() {
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

                //滚动条下到876评论部分显示回到顶部按钮
                if (scrollTop<876){
                    $('.returnTop').css("display","none")
                }else{
                    $('.returnTop').css("display","inline")
                }
                //滚动条到底部的条件
                if (scrollTop + windowHeight >= scrollHeight-1) {
                    this.loadMore()
                }
            },
            nextPage(){
                if (this.currentPage<this.totalPages){
                    this.currentPage=this.currentPage+1
                    this.loadMore(true)
                    window.scrollBy(0,-970);
                }
            },
            prePage(){
                if (this.currentPage>1){
                    this.currentPage=this.currentPage-1
                    this.loadMore(true)
                    window.scrollBy(0,-326);
                }

            },
            firstPage(){
                if(this.currentPage!=1){
                this.currentPage=1
                this.loadMore(true)
                window.scrollBy(0,-326);
                }
            },
            lastPage(){
                if(this.currentPage!=this.totalPages){
                this.currentPage=this.totalPages
                this.loadMore(true)
                window.scrollBy(0,-970);
                }
            },
            returnTop(){
                window.scrollTo({
                    left: 0,
                    top: 0,
                    behavior: 'smooth'
                })
            },

        }
    })
</script>
<script >
    new Vue({
        el: '#app2',
        data: {
            videos: [],
        },
        created(){
            moment.locale('zh-cn')
            axios.get('/video/getAllVideos/1').then(res=>{
                for (let i = 0; i <res.data.records.length -1; i++) {
                    let post_time = res.data.records[i].postTime
                    let timeDif = moment(post_time).startOf('minute').fromNow()
                    if (timeDif.indexOf("天") !== -1 || timeDif.indexOf("月") !== -1 || timeDif.indexOf("年") !== -1) {
                        res.data.records[i].postTime=(moment(post_time).format("YYYY-MM-DD"))
                    } else {
                        res.data.records[i].postTime=(moment(post_time).startOf('minute').fromNow())
                    }
                    this.videos.push(res.data.records[i])
                    }
            })
        },
    })
</script>


</body>
</html>
